<template>
  <div class="move-line pad">
    <el-page-header class="page-header" @back="goBack" :content="title">
    </el-page-header>
    <div class="head">
      <span>健康数据</span>
    </div>
    <div class="info-items">
      <div>
        <span>成员昵称: </span>
        <span>{{memberInfo.name || '--'}}</span>
      </div>
      <div>
        <span>成员性别: </span>
        <span>{{memberInfo.gender == '1' ? '男' : '女'}}</span>
      </div>
      <div>
        <span>成员年龄: </span>
        <span>{{memberInfo.age ? (memberInfo.age + '岁') : '--'}}</span>
      </div>
      <div>
        <span>所属学校: </span>
        <span>{{memberInfo.school || '--'}}</span>
      </div>
    </div>
    <div class="m-t-b">
      <el-date-picker
        v-model="dateArr"
        type="daterange"
        align="right"
        unlink-panels
        @change="changeDate"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        clearable
        :editable="false"
        @input="clearSearch"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-button type="primary" @click="handleSearch" style="margin-left: 10px;">
        <i class="el-icon-search"></i>
        搜索
      </el-button>
    </div>

    <div class="m-t-b" v-if="healthLabel.length">
      <el-radio-group v-model="currentLabelId" @change="changeRadio">
        <el-radio-button
          v-for="item in healthLabel"
          :key="item.labelId"
          :label="item.labelId"
        >{{item.labelTitle}}</el-radio-button>
      </el-radio-group>

      <p
        class="m-t-b"
        style="color: #666"
        v-if="healthLabel.find(item => item.labelId == currentLabelId).labelTitle == '体温'"
      >(体温在37℃及以上为标红状态, 仅供参考)</p>
      <el-table
        class="m-t-b"
        :data="temperatureList"
        v-loading="temperatureLoading"
        border
        stripe
      >
        <el-table-column :label="healthLabel.find(item => item.labelId == currentLabelId).labelTitle">
          <template slot-scope="scope">
            <span
              v-if="scope.row.labelTitle == '体温'"
              :style="{color: scope.row.recordValue < 37 ? '#606266' : 'red'}"
            >
              {{scope.row.recordValue + '℃'}}
            </span>
            <span
              v-else
            >
              {{scope.row.recordValue}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="记录时间" prop="createDate"></el-table-column>
      </el-table>
      <el-pagination
        class="flex m-t-b"
        :page-size="pageSize"
        layout="prev, pager, next"
        @current-change="handleTemperaturePagi"
        :total="temperatureTotal">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getMemberTemperature,
  getMemberMoveLine,
  getHealthDataLabelList
} from '../api/version2';
import { formatDate } from '../util';
export default {
  name: 'MoveLine',
  props: ['id'],
  data () {
    return {
      dateArr: '',
      currentLabelId: '',
      startDate: '',
      endDate: '',
      title: [],
      pageSize: 10,
      temperatureLoading: true,
      temperatureList: [],
      temperatureTotal: 0,
      moveLineLoading: true,
      moveLineList: [],
      moveLineTotal: 0,
      memberInfo: {
        name: '',
        age: '',
        gender: '',
        school: ''
      },
      healthLabel: [],
      whiteList: [
        '身高', '体重'
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  methods: {
    fetchTemperature (index) { // 查询体温
      this.temperatureLoading = true;
      getMemberTemperature({
        index,
        count: this.pageSize,
        queryParam: {
          memberId: this.id,
          startDate: this.dateArr ? (this.dateArr[0] + ' 00:00:00') : null,
          endDate: this.dateArr ? (this.dateArr[1] + ' 23:59:59') : null,
          labelId: this.currentLabelId
        }
      })
      .then(res => {
        this.temperatureLoading = false;
        let list = res.data.data.list || [];
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'zh:')
        });
        this.temperatureList = list;
        this.temperatureTotal = res.data.data.totalRecord
      })
      .catch(e => {
        this.temperatureLoading = false
      })
    },
    clearSearch (e) { // 清除搜索
      if (!e) {
        this.startDate = '';
        this.endDate = '';
        if (this.currentLabelId === -1) {
          this.fetchMoveLine(1)
        } else {
          this.fetchTemperature(1)
        }
      }
    },
    fetchAllLabels () { // 查询所有健康数据标签
      getHealthDataLabelList()
      .then(res => {
        let list = res.data.data || [];
        list = list.filter(item => !this.whiteList.includes(item.labelTitle));
        if (list.length) {
          this.currentLabelId = list[0].labelId;
          this.fetchTemperature(1)
        };
        list.push({
          labelId: -1,
          labelTitle: '行程记录'
        });
        this.healthLabel = list
      })
      .catch(e => {

      })
    },
    changeRadio () { // 切换标签
      if (this.currentLabelId === -1) { // 行程
        this.fetchMoveLine(1)
      } else { // 其他标签
        this.fetchTemperature(1)
      }
    },
    handleSearch () { // 搜索事件
      if (!this.dateArr) {
        return this.$message.error('搜索条件不能为空')
      };
      if (this.currentLabelId === -1) {
        this.fetchMoveLine(1)
      } else {
        this.fetchTemperature(1)
      }
    },
    handleTemperaturePagi (page) { // 体温分页事件
      this[this.currentLabelId === -1 ? 'fetchMoveLine' : 'fetchTemperature'](page)
    },
    handleMoveLinePagi (page) { // 行程分页
      this.fetchMoveLine(page)
    },
    changeDate (e) { // 改变日期
      if (e) {
        this.startDate = e[0];
        this.endDate = e[1]
      }
    },
    goBack () {
      history.back()
    },
    fetchMoveLine (index) { // 查询行程
      this.temperatureLoading = true;
      getMemberMoveLine({
        index,
        count: this.pageSize,
        queryParam: {
          memberId: this.id,
          startDate: this.dateArr ? (this.dateArr[0] + ' 00:00:00') : null,
          endDate: this.dateArr ? (this.dateArr[1] + ' 23:59:59') : null
          
        }
      })
      .then(res => {
        this.temperatureLoading = false;
        let list = res.data.data.list || [];
        this.temperatureList = list.map(item => {
          return {
            labelTitle: '行程',
            recordValue: item.deviceLocation,
            createDate: formatDate(item.createDate, 'zh:')
          }
        });
        this.temperatureTotal = res.data.data.totalRecord
      })
      .catch(e => {
        this.temperatureLoading = false
      })
    }
  },
  created () {
    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
    // this.fetchTemperature(1);
    // this.fetchMoveLine(1);
    this.fetchAllLabels();
    const query = this.$route.query;
    this.memberInfo = query
  }
}
</script>
<style lang="scss">
  .info-items {
    margin-top: 20px;
    padding-bottom: 20px;
    display: flex;
    & > div {
      margin-right: 20px;
      span {
        font-size: 20px;
        font-weight: bold;
      }
      span:nth-of-type(1) {
        
      }
      span:nth-of-type(2) {
        color: #4AC493;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
</style>
